<template>
    <div>
        <div class="product-banner"></div>
        <!-- 证书 -->
        <div class="certificate">
            <div class="certificate-list">
               <div>
                <el-button type="text" class="certificate-item0" plain @click="getCertificateDesc()">
                    <img src="~@/assets/websit/img/certificate0_active.png" alt="" />
                    <p>证书入库</p>
                </el-button>
                </div>
                <div>
                <el-button type="text" class="certificate-item1" plain @click="getCertificateDesd()">
                    <img src="~@/assets/websit/img/certificate1_active.png" alt="" />
                    <p>证书列表</p>
                </el-button>
                </div>
                <div>
                <el-button type="text" class="certificate-item2" plain @click="getCertificateDese()">
                    <img src="~@/assets/websit/img/certificate2_active.png" alt="" />
                    <p>证书借还</p>
                </el-button>
                </div>
                <div>
                <el-button type="text" class="certificate-item3" plain @click="getCertificateDesf()">
                    <img src="~@/assets/websit/img/certificate3_active.png" alt="" />
                    <p>证书延期</p>
                </el-button>
                </div>
                  <div>
                <el-button type="text" class="certificate-item4" plain @click="getCertificateDesg()">
                    <img src="~@/assets/websit/img/certificate4_active.png" alt="" />
                    <p>人员管理</p>
                </el-button>
                </div>
                  <div>
                <el-button type="text" class="certificate-item5" plain @click="getCertificateDesh()">
                    <img src="~@/assets/websit/img/certificate5_active.png" alt="" />
                    <p>消息提醒</p>
                </el-button>
                </div>
            </div>
            <div class="certificate-content" v-if="zhengshuruku">
                <img src="~@/assets/websit/img/computer.png" alt="" />
                <div class="certificate-desc">
                    <h5>证书入库</h5>
                    <p>一键录入各类人员证书信息，安全有序保存证书详细信息。</p>
                </div>
            </div>
            <div class="certificate-content" v-if="zhengshuliebiao">
                <img src="~@/assets/websit/img/computer1.png" alt="" />
                <div class="certificate-desc">
                    <h5>证书列表</h5>
                    <p>列表功能全程记录证书使用情况，智能化跟进和提醒，确保证件信息及时准确掌握，最大程度降低人员变动造成管理断档，确保顺利交接和管理效率，快速制定科学的决策方案</p>
                </div>
            </div>
            <div class="certificate-content" v-if="zhengshujiehuan">
                <img src="~@/assets/websit/img/computer2.png" alt="" />
                <div class="certificate-desc">
                    <h5>证书借还</h5>
                    <p>灵活换证、解押，每次用证都可追溯，轻松管理项目押证情况。同时可以快速自动生成报表，精准实时，使用者能够有据可依。</p>
                </div>
            </div>
            <div class="certificate-content" v-if="zhengshuyanqi">
                <img src="~@/assets/websit/img/computer3.png" alt="" />
                <div class="certificate-desc">
                    <h5>证书延期</h5>
                    <p>企业可对证书进行延期操作，随时更新证书信息，方便企业查用。</p>
                </div>
            </div>
            <div class="certificate-content" v-if="renyuanguanli">
                <img src="~@/assets/websit/img/computer4.png" alt="" />
                <div class="certificate-desc">
                    <h5>人员管理</h5>
                    <p>有效管理企业</p>
                </div>
            </div>
            <div class="certificate-content" v-if="xiaoxitixing">
                <img src="~@/assets/websit/img/computer5.png" alt="" />
                <div class="certificate-desc">
                    <h5>消息提醒</h5>
                    <p>智能化证件到期、证件归还、身份证到期预警提醒，人员证书到期继续教育，提前提醒办理，确保不错过办理时限，防止证书过期、失效。</p>
                </div>
            </div>
         </div>
        <!-- 功能亮点 -->
        <div class="func">
            <div class="func-title">
                <!-- <img src="~@/assets/websit/img/title1.png" alt="" /> -->
                <h1>产品优势</h1>
          <div class="title-bio"></div>

                <!-- <img src="~@/assets/websit/img/title2.png" alt="" /> -->
            </div>
            <h4>Product advantages</h4>
            <div class="func-content">
              <!-- 1 -->
             <div class="func-a">

             <div class="func-aa">
               
               <div class="func-aas">

                 <div class="text-a">
                   <div class="icon-e"></div>
                   <h5>证书一键入库</h5>
                 </div>

                 <!-- p -->
                 <p>企业一键录入证书信息，安全有序保存各类证书信息，不怕证书信息丢失和混乱。</p>

                <div class="div-anniu">
                  <div class="luru">一键录入</div>
                  <div class="youxu">安全有序</div>

                </div>

               </div>

             </div>
             <div class="func-ab">

               <div class="func-abs">

                 <div class="text-a">
                   <div class="icon-e"></div>
                   <h5>证书状态随时查询</h5>
                 </div>

                 <!-- p -->
                 <p>证书状态可随时查询，随时知悉证书状态，轻松解决项目证件管理，高效管理证书动态。</p>

                <div class="div-anniu">
                  <div class="luru">项目管理</div>
                  <div class="youxu">状态查询</div>

                </div>

               </div>



             </div>


             </div>
             <!-- 2 -->
             <div class="func-b">

             <div class="func-aa">
               
               <div class="func-aas">

                 <div class="text-a">
                   <div class="icon-e"></div>
                   <h5>证书借还操作</h5>
                 </div>

                 <!-- p -->
                 <p>实现项目灵活押证、证书借还管理，灵活记录证书存放信息，项目用证快速定位，提高工作效率，降低施工建筑企业证书管理成本。</p>

                <div class="div-anniu">
                  <div class="luru">证书管理</div>
                  <div class="youxu">快速定位</div>
                  <div class="youxu">提高效率</div>


                </div>

               </div>

             </div>
             <div class="func-ab">

               <div class="func-abs">

                 <div class="text-a">
                   <div class="icon-e"></div>
                   <h5>证书延期操作</h5>
                 </div>

                 <!-- p -->
                 <p>企业可对证书进行延期操作，随时更新证书信息，方便企业查用。</p>

                <div class="div-anniu">
                  <div class="luru">证书延期</div>
                  <div class="youxu">方便查用</div>

                </div>

               </div>



             </div>

             </div>
             <!-- 3 -->
             <div class="func-c">

             <div class="func-aa">
               
               <div class="func-aas">

                 <div class="text-a">
                   <div class="icon-e"></div>
                   <h5>证书到期提醒</h5>
                 </div>

                 <!-- p -->
                 <p>人员证书到期智能预警提醒，人员证书到期继续教育，提前提醒办理，确保不错过办理时限，防止证书过期、失效。</p>

                <div class="div-anniu">
                  <div class="luru">智能预警</div>
                  <!-- <div class="youxu">安全有序</div> -->

                </div>

               </div>

             </div>
             <div class="func-ab">

               <div class="func-abs">

                 <div class="text-a">
                   <div class="icon-e"></div>
                   <h5>公司架构人员一目了然</h5>
                 </div>

                 <!-- p -->
                 <p>公司架构人员信息企业一目了然，可对人员变动、人员信息进行及时调整。</p>

                <div class="div-anniu">
                  <div class="luru">企业架构</div>
                  <div class="youxu">人员信息</div>

                </div>

               </div>



             </div>

             </div>


            </div>
        </div>
        <!-- 保障您的数据安全 -->
        <div class="data-save">
            <h2>我们全力保障您的数据安全</h2>
            <ul>
                <li>
                    <img src="~@/assets/websit/img/zhiliang.png" alt="" />
                    <p>质量管理体系认证</p>
                </li>
                <li>
                    <img src="~@/assets/websit/img/xinxi.png" alt="" />
                    <p>信息安全管理体系认证</p>
                </li>
                <li>
                    <img src="~@/assets/websit/img/yunwei.png" alt="" />
                    <p>运维服务管理体系认证</p>
                </li>
                <li>
                    <img src="~@/assets/websit/img/ruanjian.png" alt="" />
                    <p>软件成熟度模型</p>
                </li>
                <li>
                    <img src="~@/assets/websit/img/pinggu.png" alt="" />
                    <p>双软企业评估</p>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import '@/assets/websit/css/product.css'
    export default {
      data (){
        return{
          zhengshuruku:true,
          zhengshuliebiao:false,
          zhengshujiehuan:false,
          zhengshuyanqi:false,
          renyuanguanli:false,
          xiaoxitixing:false
        }
      },
    methods:{
    getCertificateDesc(){
    this.zhengshuruku = true
    this.zhengshuliebiao = false
    this.zhengshujiehuan =false
    this.zhengshuyanqi = false
    this.renyuanguanli = false
    this.xiaoxitixing = false
    },
    getCertificateDesd(){
    this.zhengshuruku = false
    this.zhengshuliebiao = true
    this.zhengshujiehuan =false
    this.zhengshuyanqi = false
    this.renyuanguanli = false
    this.xiaoxitixing = false
    },
    getCertificateDese(){
    this.zhengshuruku = false
    this.zhengshuliebiao = false
    this.zhengshujiehuan =true
    this.zhengshuyanqi = false
    this.renyuanguanli = false
    this.xiaoxitixing = false
    },
    getCertificateDesf(){
    this.zhengshuruku = false
    this.zhengshuliebiao = false
    this.zhengshujiehuan =false
    this.zhengshuyanqi = true
    this.renyuanguanli = false
    this.xiaoxitixing = false
    },
    getCertificateDesg(){
    this.zhengshuruku = false
    this.zhengshuliebiao = false
    this.zhengshujiehuan =false
    this.zhengshuyanqi = false
    this.renyuanguanli = true
    this.xiaoxitixing = false
    },
    getCertificateDesh(){
    this.zhengshuruku = false
    this.zhengshuliebiao = false
    this.zhengshujiehuan =false
    this.zhengshuyanqi = false
    this.renyuanguanli = false
    this.xiaoxitixing = true
    }
    }
    }
</script>
<style lang="scss">
    .data-save{
      ul{
        li{
          img{
            width: 56px;
            height: 56px;
            margin-bottom: 5px;
          }
        }
      }
    }
    .el-button{
      border: 0px !important;
    }
    .certificate-list{
      p {
     margin-top: 10px;
     }
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .title-bio{
    width: 40px;
    height: 3px;
    background: #3FA9F5;
    opacity: 1;
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
  }
  .func-content{
    .func-a{
      width: 100%;
      height: 210px;
      background-color: #ffffff;
      .func-aa{
        width: 49.8%;
        height: 210px;
        float: left;
        border-right: 1px solid #E7E7E7;
        .func-aas{
          width: 44%;
          height: 100%;
          float: right;
          margin-right: 15%;
          // background-color: blue;
          p{
            margin-top: 18px;
            line-height: 26px;
            color: #666666;
            font-size: 14px;
          }
          .text-a{
            margin-top: 40px;
            width: 100%;
            height: 25px;
            line-height: 25px;
            .icon-e{
             width: 18px;
             height: 18px;
             margin-top: 3px;
             float: left;
             margin-right: 10px;
             background: url(~@/assets/websit/img/ruku-a.png);
             background-size: 100% 100%;
            }
            h5{
              font-size: 18px;
            }
          }
          .div-anniu{
            width: 100%;
            height: 30px;
            line-height: 30px;
            margin-top: 24px;
            .luru{
              font-size: 14px;
              font-weight: bold;
              color: #3FA9F5;
              float: left;
            }
            .youxu{
              font-size: 14px;
              font-weight: bold;
              color: #3FA9F5;
              margin-left: 40px;
              float: left;
            }
          }
        }
      }
      .func-ab{
        width: 50%;
        height: 210px;
        float: left;
        .func-abs{
          width: 44%;
          height: 100%;
          float: left;
          margin-left: 45px;
          margin-right: 15%;
          // background-color: blue;
          p{
            margin-top: 18px;
            line-height: 26px;
            color: #666666;
            font-size: 14px;
          }
          .text-a{
            margin-top: 40px;
            width: 100%;
            height: 25px;
            line-height: 25px;
            .icon-e{
             width: 18px;
             height: 18px;
             margin-top: 3px;

             float: left;
             margin-right: 10px;
             background: url(~@/assets/websit/img/chaxun-a.png);
             background-size: 100% 100%;
            }
            h5{
              font-size: 18px;
            }
          }
          .div-anniu{
            width: 100%;
            height: 30px;
            line-height: 30px;
            margin-top: 24px;
            .luru{
              font-size: 14px;
              font-weight: bold;
              color: #3FA9F5;
              float: left;
            }
            .youxu{
              font-size: 14px;
              font-weight: bold;
              color: #3FA9F5;
              margin-left: 40px;
              float: left;
            }
          }
        }
      }
    }

    .func-a .func-aa:hover{
      background: url(~@/assets/websit/img/banerc.png);
      background-size: 100% 100%;
    }
    .func-a .func-ab:hover{
      background: url(~@/assets/websit/img/banerc.png);
      background-size: 100% 100%;
    }
    .func-b .func-aa:hover{
      background: url(~@/assets/websit/img/banerc.png);
      background-size: 100% 100%;
    }
    .func-b .func-ab:hover{
      background: url(~@/assets/websit/img/banerc.png);
      background-size: 100% 100%;
    }
    .func-c .func-aa:hover{
      background: url(~@/assets/websit/img/banerc.png);
      background-size: 100% 100%;
    }
    .func-c .func-ab:hover{
      background: url(~@/assets/websit/img/banerc.png);
      background-size: 100% 100%;
    }

   .func-b{
      width: 100%;
      height: 210px;
      background-color: #ffffff;
      border-top: 1px solid #E7E7E7;
      .func-aa{
        width: 49.8%;
        height: 210px;
        float: left;
        border-right: 1px solid #E7E7E7;
        .func-aas{
          width: 44%;
          height: 100%;
          float: right;
          margin-right: 15%;
          // background-color: blue;
          p{
            margin-top: 18px;
            line-height: 26px;
            color: #666666;
            font-size: 14px;
          }
          .text-a{
            margin-top: 40px;
            width: 100%;
            height: 25px;
            line-height: 25px;
            .icon-e{
             width: 18px;
             height: 18px;
             margin-top: 3px;

             float: left;
             margin-right: 10px;
             background: url(~@/assets/websit/img/jiehuan-a.png);
             background-size: 100% 100%;
            }
            h5{
              font-size: 18px;
            }
          }
          .div-anniu{
            width: 100%;
            height: 30px;
            line-height: 30px;
            margin-top: 24px;
            .luru{
              font-size: 14px;
              font-weight: bold;
              color: #3FA9F5;
              float: left;
            }
            .youxu{
              font-size: 14px;
              font-weight: bold;
              color: #3FA9F5;
              margin-left: 40px;
              float: left;
            }
          }
        }
      }
      .func-ab{
        width: 50%;
        height: 210px;
        float: left;
        .func-abs{
          width: 44%;
          height: 100%;
          float: left;
          margin-left: 45px;
          margin-right: 15%;
          // background-color: blue;
          p{
            margin-top: 18px;
            line-height: 26px;
            color: #666666;
            font-size: 14px;
          }
          .text-a{
            margin-top: 66px;
            width: 100%;
            height: 25px;
            line-height: 25px;
            .icon-e{
             width: 18px;
             height: 18px;
             margin-top: 3px;

             float: left;
             margin-right: 10px;
             background: url(~@/assets/websit/img/yanqi-a.png);
             background-size: 100% 100%;
            }
            h5{
              font-size: 18px;
            }
          }
          .div-anniu{
            width: 100%;
            height: 30px;
            line-height: 30px;
            margin-top: 24px;
            .luru{
              font-size: 14px;
              font-weight: bold;
              color: #3FA9F5;
              float: left;
            }
            .youxu{
              font-size: 14px;
              font-weight: bold;
              color: #3FA9F5;
              margin-left: 40px;
              float: left;
            }
          }
        }
      }
    }
   .func-c{
      width: 100%;
      height: 210px;
      background-color: #ffffff;
      border-top: 1px solid #E7E7E7;
      .func-aa{
        width: 49.8%;
        height: 210px;
        float: left;
        border-right: 1px solid #E7E7E7;
        .func-aas{
          width: 44%;
          height: 100%;
          float: right;
          margin-right: 15%;
          // background-color: blue;
          p{
            margin-top: 18px;
            line-height: 26px;
            color: #666666;
            font-size: 14px;
          }
          .text-a{
            margin-top: 40px;
            width: 100%;
            height: 25px;
            line-height: 25px;
            .icon-e{
             width: 18px;
             height: 18px;
             margin-top: 3px;

             float: left;
             margin-right: 10px;
             background: url(~@/assets/websit/img/tixing-a.png);
             background-size: 100% 100%;
            }
            h5{
              font-size: 18px;
            }
          }
          .div-anniu{
            width: 100%;
            height: 30px;
            line-height: 30px;
            margin-top: 24px;
            .luru{
              font-size: 14px;
              font-weight: bold;
              color: #3FA9F5;
              float: left;
            }
            .youxu{
              font-size: 14px;
              font-weight: bold;
              color: #3FA9F5;
              margin-left: 40px;
              float: left;
            }
          }
        }
      }
      .func-ab{
        width: 50%;
        height: 210px;
        float: left;
        .func-abs{
          width: 44%;
          height: 100%;
          float: left;
          margin-left: 45px;
          margin-right: 15%;
          // background-color: blue;
          p{
            margin-top: 18px;
            line-height: 26px;
            color: #666666;
            font-size: 14px;
          }
          .text-a{
            margin-top: 40px;
            width: 100%;
            height: 25px;
            line-height: 25px;
            .icon-e{
             width: 18px;
             height: 18px;
             margin-top: 3px;

             float: left;
             margin-right: 10px;
             background: url(~@/assets/websit/img/jiagou-a.png);
             background-size: 100% 100%;
            }
            h5{
              font-size: 18px;
            }
          }
          .div-anniu{
            width: 100%;
            height: 30px;
            line-height: 30px;
            margin-top: 24px;
            .luru{
              font-size: 14px;
              font-weight: bold;
              color: #3FA9F5;
              float: left;
            }
            .youxu{
              font-size: 14px;
              font-weight: bold;
              color: #3FA9F5;
              margin-left: 40px;
              float: left;
            }
          }
        }
      }
    }
  }
</style>